<template>
  <!-- 导航栏 -->
  <!-- 传值: 父传子 在子组件内接收 props: ["属性名(title)"] -->
  <div class="content">
    <hmNavBar title="我的资料" path="/home/My" rightText="保存"></hmNavBar>
    <myCell
      title="头像"
      type="img"
      :value="userInfo.photo"
      @click.native="goEditInfo('photo')"
    ></myCell>
    <myCell
      title="昵称"
      @click.native="goEditInfo('name')"
      :value="userInfo.name"
    ></myCell>
    <myCell
      title="手机号"
      :value="userInfo.mobile"
      @click.native="goEditInfo('mobile')"
    ></myCell>
    <!-- 组件中自己定义的标签不能使用原生的事件 -->
    <!-- 必须改成 @click.native -->
    <!-- el-input 中 @keyup.enter也不能直接使用, 必须加native -->
    <myCell
      class="gender"
      title="性别"
      :value="genderObj[userInfo.gender]"
      @click.native="showGender = true"
    ></myCell>
    <myCell
      title="生日"
      :value="userInfo.birthday"
      @click.native="showBirthday = true"
    ></myCell>
    <div class="btn">
      <!-- 退出登录: 删除token 修改登录状态为false 跳转登录页 -->
      <van-button round block type="warning" @click="exit" class="bag" color="pink"
        >退出登录</van-button
      >
    </div>
    <!-- 性别选择弹框 -->
    <van-popup v-model="showGender" position="bottom">
      <!-- 性别选择器 -->
      <van-picker
        title="性别选择"
        show-toolbar
        :columns="Object.values(genderObj)"
        @confirm="genderConfirm"
        @cancel="showGender = false"
        :default-index="userInfo.gender"
      ></van-picker>
    </van-popup>
    <!-- 生日选择框 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="birthdayConfirm"
        @cancel="showBirthday = false"
      />
    </van-popup>
  </div>
</template>

<script>
import myCell from './myCell.vue'
// import { mapState } from 'vuex'
import { removeLocal } from '@/utils/Local.js'
import { userOwnData, editData } from '@/api/my.js'
export default {
  components: { myCell },
  // computed: {
  //   ...mapState(['userInfo'])
  // },
  data () {
    return {
      genderObj: {
        0: '男',
        1: '女'
      },
      // 对象转换成数组三种方法
      // 1. Object.keys(对象)  将对象的key转换成数组  ['0', '1']
      // 2. Object.values(对象)   将对象的value值转换成数组 ['男', '女']
      // 3. Object.entries(对象)  将对象的key和value都转换为数组 [['0','男'],['1','女']]
      userInfo: '',
      // 性别选择弹框显示
      showGender: false,
      columns: ['男', '女'],
      // 生日选择弹框显示
      showBirthday: false,
      // 可选时间范围
      minDate: new Date(1920, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(2000, 0, 1)
      // arr: this.userInfo.birthday.split('-')
    }
  },
  methods: {
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定退出登录吗?'
        })
        .then(() => {
          // 点击确定
          // 删除token
          removeLocal('token')
          // 修改登录状态
          this.$store.commit('setIsLogin', false)
          // 跳转至登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          // 点击取消
        })
    },
    // 性别选择确定
    genderConfirm (value, index) {
      window.console.log(value)
      window.console.log(index)
      this.showGender = false
      this.$toast.loading({
        duration: 0
      })
      editData({
        gender: index
      }).then(res => {
        window.console.log(res)
        this.$toast.success('修改性别成功')
        // 更新vuex中的userInfo
        userOwnData()
          .then(res => {
            window.console.log(res)
            // 保存用户信息到vuex中
            this.$store.commit('setUserInfo', res.data)
            // 修改登录状态
            this.$store.commit('setIsLogin', true)
          })
          .catch(() => {})
      })
    },
    // 生日选择确定
    birthdayConfirm (value) {
      window.console.log(value)
      this.showBirthday = false
      // this.$toast.loading({
      //   duration: 0
      // })
    },
    // 跳转至编辑昵称页面
    goEditInfo (str) {
      // 路由传值
      // 传 path?参数名=值
      // 收 this.$route.query.type
      this.$router.push('/home/editInfo?type=' + str)
    }
  },
  async created () {
    const res = await userOwnData()
    console.log(res)
    this.$store.commit('setUserInfo', res.data)
    this.userInfo = res.data
  }
}
</script>
<style lang="less" scoped>
.content {
  height: 100%;
  background-color: #f7f4f5;
  .gender {
    margin-top: 10px;
  }
  .btn {
    margin: 200px 40px 0 40px;
    // .bag {
    //   background: linear-gradient(to right, #ff6251 0%, #ff9d55 100%);
    // }
  }
}
</style>
